<template>
  <!-- 系统设置模块-审计日志查询页面 -->
  <div class="fillcontain">
    <!-- 标题 -->
    <div class="fastQuery">
      <el-row>
        <el-col :span="6" class="common-box">
          <el-col :span="10" class="common-lab">
            <label class="userNum">操作工号</label>
          </el-col>
          <el-col :span="14">
            <el-input clearable v-model="userNum" placeholder="操作工号"></el-input>
          </el-col>
        </el-col>

        <el-col :span="6" class="common-box">
          <el-col :span="10" class="common-lab">
            <label class="optDate">操作日期</label>
          </el-col>
          <el-col :span="14">
            <el-date-picker v-model="optDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-col>
        </el-col>

<!--        <el-col :span="6" class="common-box">
          <el-col :span="10" class="common-lab">
            <label class="labelName">操作动作</label>
          </el-col>
          <el-col :span="14">
            <el-select v-model="busAction" placeholder="请选择" clearable>
              <el-option
                v-for="item in busActionOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-col>-->

        <el-col :span="6" class="common-box">
          <el-col :span="10" class="common-lab">
            <label class="sysId">系统ID</label>
          </el-col>
          <el-col :span="14">
<!--            <el-input clearable v-model="sysId" placeholder="系统ID"></el-input>-->
            <el-select v-model="sysId" placeholder="请选择" clearable>
              <el-option
                  v-for="item in sysIdInfos"
                  :value="item">
              </el-option>
            </el-select>
          </el-col>
        </el-col>

        <el-col :span="6" class="text_center">
          <el-button type="primary" icon="el-icon-search" @click="searchLogs"></el-button>
          <el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
        </el-col>
      </el-row>
    </div>

    <div class="contain">
      <!-- 操作按钮 -->
      <div class="table_container">
        <el-table
            v-loading="loading"
            :data="tableData"
            highlight-current-row
            header-cell-class-name="table-header-class"
            style="width:100%">
          <el-table-column property="sysId" label="系统ID" min-width="60" show-overflow-tooltip></el-table-column>
          <el-table-column property="userNum" label="操作工号" min-width="75" show-overflow-tooltip></el-table-column>
          <el-table-column property="optDate" label="操作日期" min-width="75" show-overflow-tooltip></el-table-column>
          <el-table-column property="optTime" label="操作时间" min-width="75" show-overflow-tooltip></el-table-column>
          <el-table-column property="userIP" label="客户端IP" min-width="75" show-overflow-tooltip></el-table-column>
          <el-table-column property="userMachine" label="客户终端机器名" min-width="110" show-overflow-tooltip></el-table-column>
          <el-table-column property="menuName" label="菜单名" min-width="70" show-overflow-tooltip></el-table-column>
          <el-table-column property="funcDesc" label="系统功能/页面描述" min-width="130" show-overflow-tooltip></el-table-column>
          <el-table-column property="busAction" label="操作动作" min-width="75" show-overflow-tooltip></el-table-column>
          <el-table-column property="sensiDesc" label="敏感字段描述" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column property="remark" label="备注" min-width="60" show-overflow-tooltip></el-table-column>
          <el-table-column property="businessSize" label="业务信息数量" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              align='center'>
            <template slot-scope="scope">

              <span class="operationIcon ml10" @click="showDetial(scope.row)">
                <!-- 查看 -->
                <el-tooltip class="item" effect="light" content="查看" placement="top">
                  <i class="el-icon-document"></i>
                </el-tooltip>
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="24">
            <div class="pagination">
              <el-pagination
                  background
                  v-if='paginations.total > 0'
                  :page-sizes="paginations.pageSizes"
                  :page-size="paginations.pageSize"
                  :layout="paginations.layout"
                  :total="paginations.total"
                  :current-page='paginations.pageIndex'
                  @current-change='handleCurrentChange'
                  @size-change='handleSizeChange'>
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 日志详情弹窗 -->
    <el-dialog
      title="日志详情"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="920px"
      top="10vh"
      :show-close="false"
      :close-on-click-modal="false"
      class="module-dialog"
    >
      <div class="table-body">
        <el-table ref="multipleTable" :data="dialogList" style="width: 100%">
          <el-table-column prop="clntNum" label="客户号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="chdrNum" label="保单号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="applNum" label="受理号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="otherNum" label="其他业务号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
        </el-table>
      </div>
      <!-- <el-row>
        <el-col :span="24">
          <div class="pagination">
            <el-pagination
              background
              @size-change="dialogSizeChange"
              @current-change="dialogCurrentChange"
              :current-page="dialogPage.pageIndex"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="dialogPage.pageSize"
              :total="dialogPage.totalPage"
              layout="total, sizes, prev, pager, next, jumper"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>  -->
      <span slot="footer" class="dialog-footer">
        <el-button size="danger" plain @click="dialogVisible = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import appName from '@/api/appName';
  import uwLoadJs from '@/utils/uwLoad';
  import {getSysIdInfos} from '@/api/setting'
  import constant from "@/utils/constant";

  export default {
    data() {
      return {
        optDate:'',
        userNum:'',
        busAction: '',
        sysId: '',
        sysIdInfos:[],

        loading: false,
        tableData: [],
        busActionOptions: [
          {
            value: 'R',
            label: '查看'
          },
          {
            value: 'U',
            label: '修改'
          },
          {
            value: 'I',
            label: '新增'
          },
          {
            value: 'D',
            label: '删除'
          },
          {
            value: 'X',
            label: '导出/下载'
          },
        ],
        //需要给分页组件传的信息
        paginations: {
          total: 0,        // 总数
          pageIndex: 1,  // 当前位于哪页
          pageSize: 10,   // 1页显示多少条
          pageSizes: [5, 10, 15, 20],  //每页显示多少条
          layout: "total, sizes, prev, pager, next, jumper",   // 翻页属性
          printTime: '',
        },
        // 弹窗
        dialogVisible: false,
        dialogList: [],
        /* // 分页
        dialogPage: {
          pageIndex: 1, //当前页
          pageSize: 10, //每页数
          totalPage: 0, //总页数
        }, */
      }
    },
    created() {
		//移除打开后自动查询
      // this.showLogs();
      console.log("初始化-----")
      this.getSysIdInfo();
    },
    mounted() {
    },
    methods: {
      resetSearch(){
        this.userNum=''
        this.optDate=''
        // this.busAction = ''
        this.sysId = ''
      },

      getSysIdInfo(){
        console.log("查询sysid---");
        getSysIdInfos().then(res =>{
          if(res.resultCode == constant.SUCCESS){
            this.sysIdInfos = res.data;
          }
        }).catch(err =>{
          console.log(err);
        })
      },
      searchLogs(){
        this.paginations.pageSize=10;
        this.paginations.pageIndex=1;
        this.showLogs();
      },
      //查看日志
      showLogs(){
        let that = this;
        let url = appName.SCYLOG+"/third/auditlog/findPageAudit"
        let params = {
          pageNum: this.paginations.pageIndex,
          pageSize: this.paginations.pageSize,
        }
        if(this.userNum) params.userNum = this.userNum
        if(this.optDate) params.optDate = this.optDate.replace(/-/g,'')
        // if(this.busAction) params.busAction = this.busAction
        if(this.sysId) params.sysId = this.sysId

        that.loading= true;
        setTimeout(function(){
          let res = uwLoadJs.ajaxRequest(params,url);
          that.loading = false;
          if (res.resultCode == 200 && res.data!=null) {
            if(res.data.list.length==0){
              that.$message.error("无符合条件数据！");
            }
            that.tableData = res.data.list;
            if(that.tableData.length){
              that.tableData.forEach(item=> {
                if(item.busAction == 'R') item.busAction = "查看"
                else if(item.busAction == 'U') item.busAction = '修改'
                else if(item.busAction == 'I') item.busAction = '新增'
                else if(item.busAction == 'D') item.busAction = '删除'
                else if(item.busAction == 'X') item.busAction = '导出/下载'
              })
            }
            that.paginations.total = res.data.total
          }
        },10)
      },

      showDetial(data){
        this.dialogList = []
        this.getdialogList(data.extendId)
        this.dialogVisible = true;
      },

      // 每页多少条切换
      handleSizeChange(pageSize) {
        this.paginations.pageIndex = 1;
        this.paginations.pageSize = pageSize;
        this.showLogs();
      },
      // 上下分页
      handleCurrentChange(page) {
        this.paginations.pageIndex = page;
        this.showLogs();
      },

      // 弹窗列表
      getdialogList(id){
        let that = this;
        let url = appName.SCYLOG+"/third/auditlog/findPageBusiness"
        let params = {
          extend_id: id
        }
        that.loading= true;
        setTimeout(function(){
          let res = uwLoadJs.ajaxRequest(params,url);
          that.loading = false;
          if (res.resultCode == 200 && res.data!=null) {
            if(res.data.length==0){
              that.$message.error("无符合条件数据！");
            }
            that.dialogList = res.data;
          }
        },10)
      },
     /*  // 弹窗列表每页数
      dialogSizeChange(val) {
        // console.log("每页数----", val);
        this.dialogPage.pageSize = val;
        this.dialogPage.pageIndex = 1;
        this.getUserList();
      },
      // 弹窗列表当前页
      dialogCurrentChange(val) {
        // console.log("当前页----", val);
        this.dialogPage.pageIndex = val;
        this.getUserList();
      }, */

      /* // 计算页面高度
      pageTableHeight(){
        setTimeout(() => {
          const tableBody = document.querySelector('.table-body')
          tableBody.style.height = `calc(80vh - 184px)`
          tableBody.style.minHeight = `30vh`
        }, 100)
      }, */
      
    },
    computed: {},
  }
</script>
<style lang="less" scoped>
  .fillcontain {
    padding-bottom: 0;

    .fastQuery {
      padding: 15px 20px 10px 20px;
      background: #fff;
      /*border-bottom: 1px solid #e1e1e1;*/

      .fastQuery_title {
        color: #666;
        padding: 6px 0px;
      }
    }
  }

  .contain {
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;
  }

  .pagination {
    padding: 10px 20px;
    text-align: right;
  }

  .operationIcon {
    // padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0 0 3px #f9f9f9;

    .svg-icon {
      font-size: 14px;
      fill: #68a3fc;
    }
  }

  /deep/ .module-dialog .el-dialog{
    height: 80vh;
  }
  /deep/ .module-dialog .el-dialog__body{
    padding: 10px 20px !important;
    height: calc(80vh - 130px);
    overflow: auto;
  }
  /deep/ .module-dialog .el-dialog__header{
    border-bottom: 1px solid #eee;
  }
</style>
